Bootstrap 5 is in alpha when this is written and it’s subject to change.
Bootstrap is a popular UI library for any JavaScript apps.
In this article, we’ll look at how to customize dropdowns with Bootstrap 5.
Dropleft
We can add the dropleft class to make the menu show on the left.
The arrow will also be pointed to the left.
For example, we can write:
<div class="btn-group dropleft">
<button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">
button
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">foo</a></li>
<li><a class="dropdown-item" href="#">bar</a></li>
<li><a class="dropdown-item" href="#">baz</a></li>
</ul>
</div>
We add the dropleft class to the outer div to make the arrow show to the left of the button.
Also, the menu will be displayed to the left of the button.
With a split button, we’ve to put the arrow on the right instead of the left:
<div class="btn-group dropleft">
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
<span class="sr-only">Toggle Dropdown</span>
</button>
<button type="button" class="btn btn-secondary">
Split
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">foo</a></li>
<li><a class="dropdown-item" href="#">bar</a></li>
<li><a class="dropdown-item" href="#">baz</a></li>
</ul>
</div>
Menu Items
Menu items had to be links in old versions of Bootstrap.
With Bootstrap 5, items can also be buttons.
For example, we can write:
<div class="btn-group">
<button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">
button
</button>
<ul class="dropdown-menu">
<li><button class="dropdown-item" type="button">foo</button></li>
<li><button class="dropdown-item" type="button">bar</button></li>
<li><button class="dropdown-item" type="button">baz</button></li>
</ul>
</div>
We have li elements that have buttons instead of links.
Active
We can set an item to be active with the .active class.
For instance, we can write:
<div class="btn-group">
<button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">
button
</button>
<ul class="dropdown-menu">
<li><button class="dropdown-item active" type="button">foo</button></li>
<li><button class="dropdown-item" type="button">bar</button></li>
<li><button class="dropdown-item" type="button">baz</button></li>
</ul>
</div>
With the active class, the item will be highlighted.
Disabled
To make an item disabled, we can add the disabled class:
<div class="btn-group">
<button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">
button
</button>
<ul class="dropdown-menu">
<li><button class="dropdown-item disabled" type="button">foo</button></li>
<li><button class="dropdown-item" type="button">bar</button></li>
<li><button class="dropdown-item" type="button">baz</button></li>
</ul>
</div>
Now we can’t interact with the disabled item and it’s grayed out.
Menu Alignment
We can change the alignment of the menu.
To change it, we can add the .dropdown-menu-right class to the .dropdown-menu class to right-align the menu.
For example, we can write:
<div class="btn-group">
<button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">
button
</button>
<ul class="dropdown-menu dropdown-menu-right">
<li><button class="dropdown-item" type="button">foo</button></li>
<li><button class="dropdown-item" type="button">bar</button></li>
<li><button class="dropdown-item" type="button">baz</button></li>
</ul>
</div>
We have the dropdown-menu and dropdown-menu-right classes to move the alignment of it to the right.
Responsive Alignment
We can disable the dynamic positioning by adding the data-display='static' attribute.
For example, we can write:
<div class="btn-group">
<button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" data-display="static">
button
</button>
<ul class="dropdown-menu dropdown-menu-lg-right">
<li><button class="dropdown-item" type="button">foo</button></li>
<li><button class="dropdown-item" type="button">bar</button></li>
<li><button class="dropdown-item" type="button">baz</button></li>
</ul>
</div>
We add the data-display attribute.
And we added the dropdown-menu-lg-right to display the menu correctly.
This will make the menu align to the left.
We can also align it to the left with the dropdown-menu-lg-left class:
<div class="btn-group">
<button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" data-display="static">
button
</button>
<ul class="dropdown-menu dropdown-menu-lg-left">
<li><button class="dropdown-item" type="button">foo</button></li>
<li><button class="dropdown-item" type="button">bar</button></li>
<li><button class="dropdown-item" type="button">baz</button></li>
</ul>
</div>
Menu Content
We can add various kinds of content to the menu.
Headers
We can add a header with the dropdown-header class:
<div class="btn-group">
<button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" data-display="static">
button
</button>
<ul class="dropdown-menu dropdown-menu-lg-left">
<li>
<h6 class="dropdown-header">Dropdown header</h6>
</li>
<li><button class="dropdown-item" type="button">foo</button></li>
<li><button class="dropdown-item" type="button">bar</button></li>
<li><button class="dropdown-item" type="button">baz</button></li>
</ul>
</div>
Dividers
Also, we can add a divider with the dropdown-divider class:
<div class="btn-group">
<button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" data-display="static">
button
</button>
<ul class="dropdown-menu dropdown-menu-lg-left">
<li><button class="dropdown-item" type="button">foo</button></li>
<li><button class="dropdown-item" type="button">bar</button></li>
<li>
<hr class="dropdown-divider">
</li>
<li><button class="dropdown-item" type="button">baz</button></li>
</ul>
</div>
We’ll see an empty line in between the items.
Conclusion
We can customize the menu with many features.
We can add buttons as items.
Headers and dividers can also be added.
